body {margin: 0;}

body.busy-cursor {  cursor: progress;}
body.busy-cursor .CodeMirror-lines { cursor: progress; }

#toolbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 21px;
  background-color: #eee;
  z-index: 999;
  box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.4); 
}

#toolbar a {
  padding:2px 2px;
  text-decoration: none;
  border:1px solid #eee;
  color: #666;
  vertical-align: middle;
  cursor: pointer;
}
#toolbar a:hover {
  background: #ddd;
  border:1px solid #ccc;
}
#toolbar .split {
  display: inline-block;
  width: 8px;
}

::-webkit-scrollbar  
{  
    width: 4px;  
    height: 4px;  
    background-color: #FFF;  
}  
 
::-webkit-scrollbar-thumb  
{  
    border-radius: 3px;  
    background-color: #ccc;  
}  
.CodeMirror pre{
  line-height: 16px;
}

#in{
  position: fixed;
  top: 20px;
  left: 0;
  bottom: 0;
  width: 50%;
  height: auto;
  overflow: auto;
  font-size: 12px;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4); 
}

.CodeMirror {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
}

.CodeMirror-scroll {
  padding: 30px;
  box-sizing: border-box;
  overflow-x: hidden !important; /* fix bottom one line exceed */
}


#out{
  position: fixed;
  top: 20px;
  right: 0;
  left: 50%;
  bottom: 0;
  overflow: auto;
  padding: 10px;
  padding-left: 20px;
  color: #444;
  line-height: 1.5em;

  font-family: "Libre Baskerville", "Lucida Grande", "Hiragino Sans GB", "Hiragino Sans GB W3", "Microsoft YaHei", "wenquanyi micro hei", sans-serif, "Apple Color Emoji";
  font-weight: 300;
  font-size: 14px;
}

.cm-header-1 { font-size: 2em; }
.cm-header-2 { font-size: 1.75em; }
.cm-header-3 { font-size: 1.5em; }
.cm-header-4 { font-size: 1.3em; }
.cm-header-5 { font-size: 1.2em; }
.cm-header-6 { font-size: 1.15em; }

.cm-quote { color: #90a959; font-style: italic; }
.cm-error { background: inherit !important;  color: inherit !important; }
.cm-searching { background: #80ff80; }

a{ color: #0645ad; text-decoration:none;}
a:visited{ color: #0b0080; }
a:hover{ color: #06e; }
a:active{ color:#faa700; }
a:focus{ outline: thin dotted; }
a:hover, a:active{ outline: 0; }

p{margin:1em 0;}

img{max-width:100%;}

h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;line-height:1em;}
h4,h5,h6{ font-weight: bold; }
h1{ font-size:2.5em; }
h2{ font-size:2em;  }
h3{ font-size:1.5em; }
h4{ font-size:1.2em; }
h5{ font-size:1em; }
h6{ font-size:0.9em; }

blockquote{color:#666666;margin:0;padding-left: 3em;border-left: 0.5em #EEE solid;}
hr { display: block; height: 2px; border: 0; border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }

pre, code{
  color: #000;
  font-family:Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 0.94em; /* 0.94 = 0.88 + (1.00 - 0.88) / 2 */
  border-radius:3px;
  background-color: #F8F8F8;
  
}
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px;}
pre code { border: 0px !important; background: transparent !important; line-height: 1.3em; }
code { padding: 0 3px 0 3px; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { padding: 0 0 0 1em; }
li p:last-child { margin:0 }
.table-of-contents li {list-style-type: none;}

dd { margin: 0 0 0 2em; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { vertical-align: top; padding: 4px 10px; border: 1px solid #bbb; }
tr:nth-child(even) td, tr:nth-child(even) th { background: #eee; }

@media print  {

 #toolbar, #in{
  display: none;
 }
 #out {
  position: relative;
  left:0;
 }

}